import Taro , { Component } from '@tarojs/taro';
import { View, Text , Button, Swiper, SwiperItem, Image, RichText} from '@tarojs/components';
import Banner from '../../static/home/banner.png';
import Consult from '../../static/goods-detail/icon_Consultation.png';
import TipsModal from '../../components/tips-modal/index.js';
import './index.scss';
import { goodsDetail, exchangeGoodsDetail } from '../../services/goods';
import Sku from '../../components/sku/index.js';
import { set as setGlobalData, get as getGlobalData } from '../../utils/globalData';
import NavigationBar from '../../components/navigationBar/index';
import { fullImgUrl } from '../../utils/utils';


export default class Index extends Component {

   config = {
       navigationBarTitleText: ''
  }

  state = {
    exchangeData: null,
    isShowModal: Taro.getStorageSync('setting').is_tip,
    goods: null,
    setting: null,
    isShowGoodsInfo: false,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    electronic_card_id: null,
  }

  componentWillMount () {
    console.log('电子卡券', this.$router.params.electronic_card_id)

    if (this.$router.params.id) {
      goodsDetail({
        goods_id: this.$router.params.id
      }).then(res => {
        console.log(res);
        Taro.setNavigationBarTitle({
          title: res.goods_name
        })
        res.details = res.details.replace(/\<img/gi, '<img style="width: 100% !important; class="rich-img"');
        console.log(res.details,'goodetail')
        res.banner = res.banner.split(',');
        res.banner.forEach((item, index) => {
          res.banner[index] = fullImgUrl(item)
        })
        this.setState({
          goods: res,
          setting: getGlobalData('setting'),
        })
      })
    } else if (this.$router.params.code) {
      exchangeGoodsDetail({
        exchange_no: this.$router.params.code,
        card_no: Taro.getStorageSync('card_no'),
      }).then(res => {
        console.log(res)
        this.setState({
          isShowGoodsInfo: true,
          exchangeData: res
        })
      })
    }
  }
  componentDidMount () {}
  componentWillReceiveProps (nextProps,nextContext) {}
  componentWillUnmount () {}
  componentDidShow () {}
  componentDidHide () {}
  componentDidCatchError () {}
  componentDidNotFound () {}

  consult = () => {
    let self = this;
    console.log(this.state.setting)
    Taro.showModal({
      title: '咨询热线',
      content: this.state.setting.mobile,
    }).then(res => {
      if (res.confirm) {
        Taro.makePhoneCall({
          phoneNumber: self.state.setting.mobile
        })
      }
    });
  }

  close = () => {
    this.setState({
      isShowModal: false
    });
  }

  showGoodsInfo() {
    this.setState({
      isShowGoodsInfo: true
    })
  }

  closeGoodsInfo() {
    console.log('close');
    this.setState({
      isShowGoodsInfo: false
    })
  }

  render() {
    const { isShowModal, goods, isShowGoodsInfo, exchangeData } = this.state;
    return (
      <View className="container" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text={goods ? goods.goods_name : '商品详情' } />
        {isShowModal && goods && !goods.goods_type && <TipsModal onClose={this.close}></TipsModal>}
        {goods && <View className="goods-detail">
          <View className="top">
            <Swiper
              className="banner"
              indicatorColor='#DDD'
              indicatorActiveColor='#B2B2B2'
              circular
              indicatorDots
              autoplay>
              { goods.banner.map((banner, index) => {
                return <SwiperItem key={index}>
                  <Image mode="aspectFit" className="goods-image" src={banner} />
                </SwiperItem>
              })}
            </Swiper>
            <View class="goods">
              <View class="goods-info">
                <View className="goods-name">{goods.goods_name}</View>
                <View className="goods-price">¥{goods.min_price}-¥{goods.max_price}</View>
              </View>
              <View className="goods-desc">{goods.goods_desc}</View>
            </View>
          </View>
          <View className="middle">
            <View className="title">商品详情</View>
            <RichText className="rich-text" nodes={goods.details}></RichText>
          </View>
        </View>}

        {goods && <View className="bottom">
          <View className="consult-wrapper" onClick={this.consult}>
            <Image src={Consult} className="consult" />
            <View className="text">咨询</View>
          </View>
          <View className="buy-now" onClick={this.showGoodsInfo}>立即购买</View>
        </View>}
        {isShowGoodsInfo && goods && <Sku onClose={this.closeGoodsInfo.bind(this)} goodsImage={goods.banner} goodsAttr={goods.has_attr} goodsSku={goods.has_sku} goodsType={goods.goods_type} electronicCardId={this.$router.params.electronic_card_id}/>}
        {isShowGoodsInfo && exchangeData && <Sku exchangeData={exchangeData} code={this.$router.params.code} electronicCardId={this.$router.params.electronic_card_id} />}
      </View>
    );
  }
}
